<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.text-ellipsis {
				width: 100px;
				p {
					padding: 0 10px;
					line-height: 40px;
					text-align: justify;
					font-size: 20px;
					color: #fff;
					&.s-line {
						background-color: #f66;
					}
					&.m-line {
						background-color: #66f;
					}
				}
				.s-ellipsis {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.m-ellipsis {
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					word-break: break-all;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2; /* Webkit 内核浏览器（如 Chrome、Safari） */
					-moz-line-clamp: 2; /* Firefox */
					-ms-line-clamp: 2; /* Internet Explorer/Edge */
					line-clamp: 2; /* 标准属性 */
				}
				/* 可以通过伪元素设置 */
				/* .m-ellipsis {
					overflow: hidden;
					position: relative;
					max-height: 120px;
					line-height: 40px;
					&::after {
						position: absolute;
						right: 0;
						bottom: 0;
						padding-left: 20px;
						background: linear-gradient(
							to right,
							transparent,
							#fff 50%
						);
						content: "...";
					}
				} */
			}
		</style>
	</head>
	<body>
		<div class="text-ellipsis">
			<p class="s-line s-ellipsis">玩转CSS的艺术之美</p>
			<p class="m-line m-ellipsis">玩转CSS的艺术之美</p>
		</div>
	</body>
</html>
